<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="index.css">
		<title>首页 · 首师附技术宅同好会</title>
	</head>
	<body>
		<!-- 导航栏 -->
		<header>
			<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand"><span class="glyphicon glyphicon-plane"></span>首师附技术宅同好会</a>
					</div>

					<div class="collapse navbar-collapse">
						<ul class="nav navbar-nav">
							<li class="active"><a href="">同好会首页</a></li>
							<li><a href="forum.html">同好会论坛</a></li>
							<li class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" href="">各社团简介<span class="badge">6</span><span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="http://tieba.baidu.com/p/3213201445" target="_blank">V家同好社</a></li>
									<li><a href="http://tieba.baidu.com/p/3212784880#sub" target="_blank">信息技术社</a></li>
									<li><a href="x-ray.html" target="_blank">X-Ray演艺社</a></li>
									<li><a href="" target="_blank">VIVID微电影社</a></li>
									<li><a href="" target="_blank">Galaxy光影社</a></li>
									<li class="divider"></li>
									<li><a href="http://tieba.baidu.com/p/3217866917" target="_blank">同好会联合公告</a></li>
								</ul>
							</li>
							<li class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" href="">游戏区<span class="badge">4</span><span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="online-games/snake/snake.html" target="_blank">Snake Game</a></li>
									<li><a href="online-games/evil-bats/index.html" target="_blank">Evil Bats</a></li>
									<li><a href="online-games/bingo/bingo.html" target="_blank">bingo</a></li>
									<li><a href="100MB.test" target="_blank">100MB下载测速游戏</a></li>
								</ul>
							</li>
						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li><a href="" data-toggle="modal" data-target="#contact">联系我们</a></li>
							<li><a href="" data-toggle="modal" data-target="#signin">登录</a></li>
							<li><a href="" data-toggle="modal" data-target="#register">新会员登记</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
		<!-- 主内容区 -->
		<main>
		<div class="jumbotron">
      <div class="container">
        <h3>
          X-Ray演艺色
        </h3>
        <P>
          你可以来当一个dancer，我们会给你提供舞台~
          <br>
          你可以来这里当一个leader，组织更精彩的演出~
          <br>
          你可以当一位写手，写一期微电影的剧本~
          <br>
          你可以当一位演员，在镜头下展示最真实的自己~
          <br>
          你当然也可以是一只汉子~
          <br>
          <br>
          只要你爱演艺，便有机会加入我们~~
          <br>
        </P>
        <P>
          <a class="btn btn-primary btn-lg" role="button" data-toggle="modal" data-target="#contact">
            只需一秒
            <br>
            便可加入我们 »
          </a>
        </P>
      </div>
    </div>
	<div class="container">
        <article>
          <h1>
            X-RAY演艺社人员简介
          </h1>
          <img src="/x-ray_files/1.jpg" align="middle" width="300" height="400" style="float: left;">
          <h2>
            社长：雒艺涵
          </h2>
          <P>
            本社一只会唱歌跳舞编剧画画的纯文艺妹子、负责组织策划还有专场设计。
          </P>
          <H2>
            副社长：
          </H2>
          <h3>
            沈馨蕙
          </h3>
          <P>
            社团的舞蹈教学老师！舞蹈灰常棒、韩饭、软妹<img src="x-ray_files/2.jpg" align="middle" width="400" height="300">
          </P>
          <h3>
            刘雨凝
          </h3>
          <P>
            美丽的文科妹子，文艺范十足。<img src="x-ray_files/4.jpg" align="middle" width="300" height="400">
          </P>
          <h3>
            林子悦
          </h3>
          <P>
            第一个入色的新高一舞蹈团妹子、可能将成为新高一的指导老师<img src="x-ray_files/3.jpg" align="middle" width="300" height="300">
          </P>
          <h1 style="clear: both; position: relative; margin-top: 70px;">
            X-Ray社团起源
          </h1>
          <P>
            本社团雏形是一群喜欢舞蹈的（喜欢逗比的当然还有一些被色长“强迫”的文艺妹子）文科班妹子抱着试试的心态参加2013届首师附校园达人秀.<img src="x-ray_files/perform1.jpg" align="middle" width="400" height="300"> 
          </P>
          <h1>
            活动详细
          </h1>
          <P>
            2013.12.20 舞蹈《cry cry》（原高一九班：雒艺涵、李思凡、汪舟、景凡芮、王雅琪、任思璇）让X-RAY一直留在了最后.<img src="x-ray_files/perform2.jpg" align="middle"width="400" height="300">
            <br>
            达人秀表演《crycry》链接：
            <a href="http://url.cn/ONUGtJ" target="_blank">
              猛击此处三千下
            </a>
            <br>
            【温馨提示：色长虽然平时与大家一起逗比但是排练时非常严肃，如果没练好有时候甚至中午练习或者晚上到六点多，也有可能夜深人静的时候带你们去抓鬼。。。
            <br>
            当然！！！一切的一切都是为了表演的成功～
            <br>
            2014.3.21 本社正式成立并在学校举办了X-Ray专场。【开学近一个多月的排练很辛苦，那时舞蹈教室还在装修，每天练舞就像在工地里一样，特有feel】
            <br>
            2014.4.3 本社拍摄试用版微电影《青春无NG》【周六日小伙伴们来学校与保安叔叔各种逗比～几乎用到手语，或在首师所学内容～】
            <br>
            2014.4.30 本社受五四表彰，在学校走红毯，被评为A级社团。
            <br>
            2014.5.22 本社受邀去交大附中表演，受到好评。
            <br>
            2014.5.29 本社受邀参加学校高一年级红五月表演<img src="/x-ray_files/red5perform1.jpg" align="middle"width="400" height="300">
            <br>
            2014.7.7 本社收编于学校，派指导老师卢江涛老师进行指导。
            <br>
            2014.7.8 本社受邀参加学校百年校庆。
            <br>
            预计在2014.10 本社将举办第二次专场将于首师附男子舞蹈团合作，不一样的精彩，敬请期待。
            <br>
          </P>
          <h1>
            X-Ray演艺社招新事项
          </h1>
          <h3>
            1、热爱k-pop,爵士，街舞的小伙伴们~
          </h3>
          <h3>
            2、喜欢韩国组合的饭们~
          </h3>
          <h3>
            3、喜欢流行歌曲的伙伴们~
          </h3>
          <h3>
            4、喜欢电影制作，演绎等传媒的爱好者们~
          </h3>
          <a href="http://tieba.baidu.com/p/3215472768?pid=55196440174&cid=0#55196440174"
          target="_blank">
            百度贴吧宣传贴
          </a>
          <br>
        </article>
      </div>
		</main>
		<!-- 页脚 -->
		<div class="container">
			<footer>
				<p><small>&copy; 首师附技术宅同好会 2014</small></p>
				<p><small>Made By 首师附信息技术社&trade;<a href="http://my.crissic.net/" target="_blank">Powered By Crissic</a>极ICP证000002</small></p>
				<div class="container">
					<div class="row">
						<div class="col-md-4">
							
						</div>
						<div class="col-md-4">
							
						</div>
						<div class="col-md-4">
							
						</div>
					</div>
				</div>
			</footer>
		</div>
		<!-- 模态框组 -->
		<!-- 会员登记 -->
		<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="registerLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
		        <h4 class="modal-title" id="registerLabel">新会员登记</h4>
		      </div>
		      <div class="modal-body">
		      <form class="form-register form-horizontal" role="form" id="registerForm">
      				<label for="name">姓名</label>
							<input class="form-control" type="text" name="name" placeholder="请输入姓名" maxlength="8" required id="name">

						<h3>性别</h3>
						<label class="radio-inline">
							<input type="radio" id="sex" name="sex" value="boy">正太（男孩纸）
						</label>
						<label class="radio-inline">
							<input type="radio" id="sex" name="sex" value="girl">萝莉（女孩纸）
						</label>
					
						<h3>年级&班级</h3>
						<select name="grade" id="grade">
							<option value="zm">中美（国际部）</option>
							<option value="pg">普高（高中部）</option>
							<option value="cz">初中（初中部）</option>
						</select>
						<select name="class" id="class">
							<option value="1">1班</option>
							<option value="2">2班</option>
							<option value="3">3班</option>
							<option value="4">4班</option>
							<option value="5">5班</option>
							<option value="6">6班</option>
							<option value="7">7班</option>
							<option value="8">8班</option>
							<option value="9">9班</option>
							<option value="10">10班</option>
							<option value="11">11班</option>
							<option value="12">12班</option>
						</select>
					
						<h3>什么时候有时间参加活动？</h3>
							<label class="checkbox-inline">
								<input type="checkbox" id="mon" name="mon" value="mon">星期一
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" id="tue" name="tue" value="tue">星期二
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" id="wed" name="wed" value="wed">星期三
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" id="thu" name="thu" value="thu">星期四
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" id="fri" name="fri" value="fri">星期五
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" id="sat" name="sat" value="sat">星期六
							</label>
							<label class="checkbox-inline">
								<input type="checkbox" id="sun" name="sun" value="sun">星期日
							</label>
						
						<h3>兴趣OR专长</h3>
						<input class="form-control" type="text" id="interest" name="interest" placeholder="兴趣OR专长" required>

		      		</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-primary" onclick="formSubmit('registerForm');">确认&登记 </button>
		      </div>
		    </div>
		  </div>
		</div>
		<!-- 联系我们 -->
		<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
	        		<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
	        		<h4 class="modal-title" id="contactLabel">联系我们</h4>
					</div>
					<div class="modal-body">
					    <p>搜索QQ群号：84398540</p><h2>首师附技术宅同好会</h2>
						<p>你也可以扫描二维码</p>
						<img src="images/1407505838882.png">
						<p>或点击链接</p>
						<a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=6b67dd13845ec3e94a646de1291719e057e9ffa8dec4c68fe21f729867bbfcbe"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="首师附技术宅同好会" title="首师附技术宅同好会"></a>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">返回</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 登录 -->
		<div class="modal fade" id="signin" tabindex="-1" role="dialog" aria-labelledby="signinLabel" aria-hidden="true">
			<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
						<h4 class="modal-title" id="signinLabel">登录</h4>
					</div>
					<div class="modal-body">
			      <form class="form-register" role="form" id="signinForm">
			        <input type="text" class="form-control" placeholder="用户名" required autofocus id="signinText">
			        <input type="password" class="form-control" placeholder="密码" required>
			        <div class="checkbox">
			          <label>
			            <input type="checkbox" value="remember-me"> 记住我
			          </label>
			        </div>
			      </form>
			     </div>
			     <div class="modal-footer">	
			     	<button type="button" class="btn btn-primary" onclick="formSubmit('signinForm');">登录</button>
			     </div>
	      </div>
			</div>
    </div>
		<!-- jQuery库 -->
		<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<!-- Bootstrap支持Javascript组件 -->
		<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
		<script>
			function formSubmit(formName) { document.getElementById(formName).submit(); }
		</script>
	</body>
</html>